<template>
  <div class="category">
    <template v-for="(t, i) in types">
      <div class="cate-bar f26" :key="i + '-bar'">{{t}}</div>
      <ul class="cate-data" :key="i + '-data'">
        <router-link tag="li" v-for="v in services.filter(s => s.serviceType == t)" :key="v.serviceId" :to="{path: '/masters', query: {serviceId: v.serviceId}}">
          <figure>
            <img :src="$store.state.domain + v.icon">
          </figure>
          <p>{{v.serviceName}}</p>
        </router-link>
      </ul>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      types: ['预测', '起名', '择吉', '远程风水', '线下服务'],
      services: []
    };
  },
  methods: {
    getServices() {
      this.$http.fetchGet('getServiceListSimple', {
        limit: 100,
      }).then(({data}) => {
        console.log('服务列表', data);
        this.services = data;
      })
    }
  },
  created() {
    this.getServices()
  }
};
</script>

<style scoped lang="less">
.category {
  .cate-bar {
    .h(88);
    .lh(88);
    .pl(30);
    border-bottom: 1px solid @bdColor;
  }
  .cate-data {
    display: flex;
    flex-wrap: wrap;
    .bb20();
    li {
      width: 25%;
      .pt(30);
      .pb(30);
      &:active {
        background-color: @bgColor;
      }
      figure img {
        display: flex;
        margin: 0 auto;
        .w(64);
        .h(64);
      }
      p {
        .f24;
        .pt(30);
        text-align: center;
      }
    }
  }
}
</style>
